<template>
  <div class="signup container-fluid px-3">
    <div class="row min-vh-100">
      <div
        class="col-md-8 col-lg-6 col-xl-5 justify-content-center align-items-center min-vh-100"
        style="display: flex"
      >
        <div class="signup_form">
          <h1 class="form_title">Sign up</h1>
          <p class="text-muted">
            His room, a proper human room although a little too small, lay
            peacefully between its four familiar walls. A collection of textile
            samples lay spread out on the table.
          </p>
          <div class="form_item">
            <h3>Email or Tel</h3>
            <div class="es-input-group">
              <div class="es-input-group-prepend">
                <span class="es-input-group-text" id="basic-addon3">
                  account
                </span>
              </div>
              <input
                type="text"
                class="es-input"
                id="basic-url"
                aria-describedby="basic-addon3"
              />
            </div>
          </div>
          <div class="form_item">
            <h3>Password</h3>
            <div class="es-input-group">
              <input
                type="password"
                class="es-input"
                id="basic-url"
                aria-describedby="basic-addon3"
              />
              <div class="es-input-group-append">
                <button
                  class="es-button es-round es-iconfont icon-eye-close"
                ></button>
              </div>
            </div>
          </div>
          <div class="form_item">
            <h3>Confirm Password</h3>
            <div class="es-input-group">
              <input
                type="password"
                class="es-input"
                id="basic-url"
                aria-describedby="basic-addon3"
              />
              <div class="es-input-group-append">
                <button
                  class="es-button es-round es-iconfont icon-eye-close"
                ></button>
              </div>
            </div>
          </div>
          <div class="form_item">
            <div class="es-button-group" style="width: 100%">
              <button
                class="es-button es-round es-blue group-item"
                @click="loginHandle"
              >
                Sign Up
              </button>
              <button class="es-button es-round group-item">
                <router-link to="/login">Sign In</router-link>
              </button>
            </div>
          </div>
          <div class="form_item"></div>
          <div class="form_item">
            <button class="es-button es-round es-ful">
              <router-link to="/">Cancel</router-link>
            </button>
          </div>
          <div
            class="es-divider es-divider-horizontal es-divider-default es-divider-with-text es-divider-with-text-center"
          >
            <span class="es-divider-inner-text">OR</span>
          </div>
          <div class="form_item">
            <button class="es-button es-round es-ful">
              Connect with WeiXin
            </button>
          </div>
          <div class="form_item">
            <button class="es-button es-round es-ful">Connect with QQ</button>
          </div>
          <div
            class="es-divider es-divider-horizontal es-divider-default"
          ></div>
          <div class="form_item">
            By signing up you agree to Directory's
            <router-link to="/info">[Terms and Conditions]</router-link> and
            <router-link to="/info">[Privacy Policy]</router-link>.
          </div>
        </div>
      </div>
      <div class="col-md-4 col-lg-6 col-xl-7">
        <div
          class="bg-cover h-100 me-n3"
          style="
            background-image: url(https://d19m59y37dris4.cloudfront.net/directory/2-0-2/img/photo/photo-1497436072909-60f360e1d4b1.jpg);
          "
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Signup",
  components: {},
  methods: {
    loginHandle() {
      localStorage.setItem("token", "111111");
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss">
.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
.min-vh-100 {
  min-height: 100vh !important;
}
.signup {
  .signup_form {
    background-color: var(--white);
    padding: 1.5rem 8vw;
    .form_title {
      padding: 0.5rem 0;
    }
    .form_item {
      padding: 0.15625rem 0;
      h3 {
        font-size: 1rem;
      }
    }
    .text-muted {
      --bs-text-opacity: 1;
      color: #6c757d !important;
      margin-bottom: 0.625rem;
    }
  }
  .bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .me-n3 {
    margin-right: -1rem !important;
  }
  .h-100 {
    height: 100% !important;
  }
}
</style>
